<template>
  <div>
    <div mybody @click="cinemaDetails">
      <div class="title">
        <span>{{cinemaName}}</span>
      </div>
      <div class="address">
        <span>{{cinemaAddress}}</span>
      </div>
      <div class="num">
        <span class="number">电话:</span>&nbsp;
        <span class="numbers">{{cinemaPhone}}</span>
      </div>
    </div>
    <van-divider
      hairline
      :style="{ borderColor: 'rgb(224, 224, 224)', padding: '0 16px' }"
    >
    </van-divider>
  </div>
</template>

<script>
export default {
  props:["cinema"],
  data() {
    return {
      cinemaName: this.cinema.name,
      cinemaAddress: this.cinema.specifiedAddress,
      cinemaPhone: this.cinema.phone,
    }
  },
  methods: {
    cinemaDetails() {
      console.log(this.props)
      this.$router.push({
        path:"/cinemadetails",
        query:{cinemaName:this.cinemaName,
        cinemaAddress:this.cinemaAddress,
        cinemaPhone:this.cinemaPhone}
      });
    }
  },
  
};
</script>

<style scoped>
.mybody {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title {
  margin-left: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.address {
  margin-left: 1rem;
  color: #969799;
  margin-right: 1rem;
}
.num {
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.number {
  color: rgb(4, 201, 53);
  border: 1px solid;
  padding: 3px 3px;
  border-radius: 4px;
}
.numbers {
  color: rgb(248, 170, 52);
  border: 1px solid;
  padding: 3px 3px;
  border-radius: 4px;
}
</style>
